<template>
  <div class="app-container">
    <div class="main-container">
      <div class="page-header">
        <div class="header-left">
          <router-link to="/main/renshi/zhaoping/zhaopingxiudin" class="back-btn">
            <i class="el-icon-arrow-left"></i> 返回
          </router-link>
        </div>
        <div class="header-center">
          <h2 class="title">深圳市艾美思普科技有限公司</h2>
          <h3 class="subtitle">外来文件登记表</h3>
        </div>
        <div class="header-right">
          <template v-if="!isView">
            <el-button-group>
              <el-button type="primary" icon="el-icon-plus" @click="addFile">新增</el-button>
              <el-button type="success" icon="el-icon-check" @click="saveData">保存</el-button>
               <el-button type="success" icon="el-icon-view" @click="goToList">列表</el-button>
            </el-button-group>
          </template>
        </div>
      </div>

      <div class="content-wrapper">
        <el-card class="form-card" shadow="hover">
          <div class="file-category">
            <span class="category-label">文件类别：</span>
            <el-radio-group v-model="selectedCategory" :disabled="isView">
              <el-radio v-for="(item, key) in fileCategoryMap" 
                       :key="key" 
                       :label="key">
                <el-tag :type="item.type" effect="plain">{{ item.label }}</el-tag>
              </el-radio>
            </el-radio-group>
          </div>

          <el-table
            :data="fileList"
            border
            stripe
            style="width: 100%; margin-top: 20px;"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column label="序号" type="index" width="80" align="center">
            </el-table-column>
            <el-table-column label="文件编号" min-width="150">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.fileNumber" 
                  :disabled="isView"
                  placeholder="请输入文件编号"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="文件名称" min-width="200">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.fileName" 
                  :disabled="isView"
                  placeholder="请输入文件名称"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="提供单位" min-width="150">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.provider" 
                  :disabled="isView"
                  placeholder="请输入提供单位"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="初审部门" min-width="120">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.preReviewDepartment" 
                  :disabled="isView"
                  placeholder="请输入初审部门"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="分发部门" min-width="120">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.distributionDepartment" 
                  :disabled="isView"
                  placeholder="请输入分发部门"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="版本" min-width="100">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.fileVersion" 
                  :disabled="isView"
                  placeholder="请输入版本"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="150">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.remarks" 
                  :disabled="isView"
                  placeholder="请输入备注"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column v-if="!isView" label="操作" width="80" fixed="right">
              <template slot-scope="scope">
                <el-button 
                  type="danger" 
                  icon="el-icon-delete" 
                  size="mini"
                  circle
                  @click.prevent="deleteFile(scope.$index)">
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="form-footer">
            <div class="footer-info">
              <el-divider></el-divider>
              <div class="info-row">
                <span class="info-item">表单编号及版本： AM-FR-0003 A/0</span>
                <span class="info-item">生效日期：2006年 11月 1日</span>
                <span class="info-item">保存年限：长期</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getExternalFileById, batchSaveExternalFile } from '@/api/externalFile'

export default {
  name: 'Wailai',
  data() {
    return {
      isView: false,
      selectedCategory: '',
      fileList: [
        this.getEmptyFile()
      ],
      fileCategoryMap: {
        government: { label: '政府提供', type: 'success' },
        customer: { label: '客户提供', type: 'primary' },
        supplier: { label: '供应商提供', type: 'warning' },
        other: { label: '其他途径', type: 'info' }
      },
      tableHeaderStyle: {
        background: '#f5f7fa',
        color: '#303133',
        fontWeight: '600',
        height: '50px',
        padding: '0',
        textAlign: 'center'
      },
      tableCellStyle: {
        padding: '8px 0',
        textAlign: 'center'
      }
    }
  },
  created() {
    const { id, type } = this.$route.query
    if (id) {
      this.isView = type === 'view'
      this.getDetail(id)
    }
  },
  methods: {
    goToList(){
        this.$router.push('/main/biao/wailaiList')
    },
    getEmptyFile() {
      return {
        fileNumber: '',
        fileName: '',
        provider: '',
        preReviewDepartment: '',
        distributionDepartment: '',
        fileVersion: '',
        remarks: ''
      }
    },
    async getDetail(id) {
      try {
        const response = await getExternalFileById(id)
        if (response.data) {
          this.fileList = [response.data]
          this.selectedCategory = response.data.fileCategory || ''
        }
      } catch (error) {
        console.error('获取详情失败', error)
      }
    },
    addFile() {
      this.fileList.push(this.getEmptyFile())
    },
    deleteFile(index) {
      if (this.fileList.length === 1) {
        this.$message.warning('至少保留一条记录')
        return
      }
      this.fileList.splice(index, 1)
    },
    validateData() {
      if (!this.fileList.length) {
        this.$message.error('至少需要一条记录')
        return false
      }

      if (!this.selectedCategory) {
        this.$message.error('请选择文件类别')
        return false
      }

      for (const file of this.fileList) {
        if (!file.fileNumber || !file.fileName || !file.provider) {
          this.$message.error('文件编号、名称和提供单位不能为空')
          return false
        }
      }

      return true
    },
    async saveData() {
      if (!this.validateData()) {
        return
      }

      const saveList = this.fileList.map(file => ({
        ...file,
        fileCategory: this.selectedCategory
      }))

      try {
        await batchSaveExternalFile(saveList)
        this.$message.success('保存成功')
        this.$router.push('/main/biao/wailaiList')
      } catch (error) {
        console.error('保存失败', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  // background-color: #f0f2f5;
  min-height: 100vh;
}

.main-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .header-left, .header-right {
    min-width: 150px;
  }

  .header-center {
    flex: 1;
    text-align: center;

    .title {
      margin: 0 0 8px;
      color: #303133;
      font-size: 20px;
      font-weight: 600;
    }

    .subtitle {
      margin: 0;
      color: #606266;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.back-btn {
  text-decoration: none;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  
  &:hover {
    color: #409EFF;
  }

  i {
    margin-right: 4px;
  }
}

.content-wrapper {
  background-color: transparent;
}

.form-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .file-category {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #ebeef5;

    .category-label {
      margin-right: 20px;
      font-weight: 500;
      color: #303133;
    }
  }
}

.form-footer {
  margin-top: 30px;

  .footer-info {
    .info-row {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }

    .info-item {
      color: #606266;
      font-size: 14px;
    }
  }
}

:deep(.el-table) {
  border-radius: 4px;
  margin-bottom: 20px;

  &::before {
    display: none;
  }

  .el-table__header-wrapper {
    border-radius: 4px 4px 0 0;
  }

  .el-input {
    width: 100%;
  }
}

:deep(.el-button) {
  padding: 9px 15px;

  &.el-button--mini {
    padding: 7px 12px;
  }

  [class*="el-icon-"] + span {
    margin-left: 4px;
  }
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-divider) {
  margin: 20px 0;
}

:deep(.el-checkbox-group) {
  display: flex;
  gap: 30px;
}

:deep(.el-radio-group) {
  display: flex;
  gap: 30px;
  
  .el-radio {
    margin-right: 0;
    
    .el-tag {
      margin-left: 4px;
    }
  }
}
</style>